@import "../utils/utils";

@mixin theme(
    $primary-text-color,
    $bg-color,
    $dark-text-color,
    $inactive-text-color,
    $link-text-color,
    $light-text-color,
    $secondary-text-color,
    $success-color,
    $info-color,
    $warning-color,
    $alert-color,
    $super-light-panel-bg-color,
    $panel-bg-color,
    $button-bg-color,
    $secondary-button-bg-color,
    $fee-color,
    $bid-color,
    $ask-color,
    $call-color,
    $light-panel-bg-color,
    $positive-color,
    $negative-color,
    $row-accent-color,
    $header-color,
    $input-background,
    $account-header,
    $account-cells,
    $account-green,
    $account-primarytext,
    $account-dimmed,
    $account-border,
    $account-background,
    $account-tabs-background,
    $pulsate-green-start,
    $pulsate-green-end,
    $pulsate-red-start,
    $pulsate-red-end,
    $settings-select-bg,
    $settings-select-color,
    $settings-menu-hover-bg,
    $settings-menu-active-bg,
    $settings-api-node-border-color,
    $main-content-margin-block-bg-color,
    $modal-bg-color,
    $mobile-input-bg
) {
    $hamburger-submenu-display-endpoint: 990px;

    .settings-select {
        height: 36px;
        padding: 0 12px;
        background-color: $settings-select-bg;
        color: $settings-select-color;
    }
    
    .settings-input {
        /* !important to overwrite styles for Inputs on User Settings. By default inputs take styles from
    .block-list and it uses on many places. To keep everything OK and do not break something I just do
    overwrite for Inputs on settings and keep default styles for inputs on another places.
    */
        color: $settings-select-color !important;
        height: 36px !important;
        background-color: $settings-select-bg !important;
        border-bottom: 0 !important;
        max-width: 100% !important;
    }

    .positive {
        color: $positive-color !important;
    }

    .negative {
        color: $negative-color !important;
    }

    .dark-text-color {
        color: $dark-text-color;
    }

    .fz_12 {
        font-size: 12px;
    }

    .spinner-button-circle .circle-wrapper {
        display: inline-block;
        vertical-align: middle;
        margin-right: 7px;
        margin-top: -2px;
        .circle:before {
            background-color: #fff;
        }
    }

    .font-secondary {
        color: $secondary-text-color;
    }

    svg > path {
        transition: all 0.3s ease 0s;
    }

    #content-wrapper {
        @include color($primary-text-color, $bg-color);
    }

    hr {
        border-color: $dark-text-color;
        background-color: $dark-text-color !important;
    }

    a {
        color: $link-text-color;
        &:hover,
        &:focus,
        &:active {
            color: lighten($link-text-color, 4%);
        }
    }

    label,
    label > span {
        color: $primary-text-color;
    }

    // select:hover {
    //   background-color: $panel-bg-color;
    // }

    .label.success {
        color: $success-color;
        border-color: $success-color;
    }

    .label.info {
        color: $info-color;
        border-color: $info-color;
    }

    .label.warning {
        color: $warning-color;
        border-color: $warning-color;
    }

    .label.cancel,
    .label.alert {
        color: $alert-color;
        border-color: $alert-color;
    }

    .txtlabel.success {
        color: $success-color;
    }

    .txtlabel.info {
        color: $info-color;
    }

    .txtlabel.warning {
        color: $warning-color;
    }

    .txtlabel.cancel,
    .label.alert {
        color: $alert-color;
    }

    .txtann.success {
        color: $success-color;
    }

    .txtann.info {
        color: $info-color;
    }

    .txtann.warning {
        color: $warning-color;
    }

    .txtann.error {
        color: $alert-color;
    }

    // notification

    .notification {
        @include color($primary-text-color, $light-panel-bg-color, true);
    }

    .notification-dismiss {
        @include color($primary-text-color, $super-light-panel-bg-color, true);
    }

    .notification-success {
        border-left-color: $success-color !important;
    }

    .action-sheet {
        @include color($light-text-color, $super-light-panel-bg-color);
        &::after {
            border-bottom-color: $super-light-panel-bg-color;
        }
        > ul > li > a {
            color: $light-text-color;
            border-top-color: $panel-bg-color;
            &:hover {
                @include color(
                    $light-text-color,
                    lighten($super-light-panel-bg-color, 4%)
                );
                // color: $link-text-color;
            }
        }
    }

    .__react_component_tooltip.type-light {
        @include color($light-text-color, $super-light-panel-bg-color, true);
        &.place-bottom:after {
            border-bottom-color: $super-light-panel-bg-color !important;
        }
        &.place-top:after {
            border-top-color: $super-light-panel-bg-color !important;
        }
        &.place-right:after {
            border-right-color: $super-light-panel-bg-color !important;
        }
        &.place-left:after {
            border-left-color: $super-light-panel-bg-color !important;
        }
    }

    .json-inspector__key {
        color: $secondary-text-color !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: $primary-text-color;
    }

    // copyicons
    .copyIcon {
        background-color: $button-bg-color;
        > button.copyIcon {
            background-color: $button-bg-color;
        }
    }

    .modal {
        @include color($light-text-color, $account-cells);
        .modal__highlight {
            color: $info-color;
        }
        .close-button {
            color: $secondary-text-color;
            &:hover {
                color: $primary-text-color;
            }
        }
        .modal-header {
            > h6 {
                color: $secondary-text-color;
            }
            &.has-error > h6 {
                color: $error-text-color;
            }
        }
        .circle-wrapper {
            .circle:before {
                background-color: $primary-text-color;
            }
        }
        .table {
            > thead > tr > th,
            > tbody > tr > td {
                border-bottom-color: darken($secondary-text-color, 10%);
            }
        }

        span.send-name {
            color: $link-text-color;
        }
    }

    .icon > svg > path {
        fill: $primary-text-color;
    }

    .footer {
        @include color($secondary-text-color, $panel-bg-color);
        svg > path {
            fill: $secondary-text-color;
        }
        .logo .version {
            color: darken($secondary-text-color, 10%);
        }
    }

    .panel-left {
        @include color($light-text-color, $light-panel-bg-color);
        .block-list li > a {
            color: $light-text-color;
            &:hover {
                background-color: darken($light-panel-bg-color, 4%);
            }
        }
    }

    .tabs {
        @include color($secondary-text-color, $bg-color);
    }

    .page-layout {
        background-color: lighten($account-header, 4%);

        .left-column {
            border-top-color: $bg-color;
            border-bottom-color: $bg-color;
            background-color: $panel-bg-color; //lighten($bg-color, 4%);
        }

        .left-column-2 {
            border-top-color: $bg-color;
            border-bottom-color: $bg-color;
            background-color: darken($bg-color, 4%);
        }

        .main-content {
            background-color: $bg-color;

            &.margin-block {
                background-color: $main-content-margin-block-bg-color;
            }
        }

        .right-column {
            border-top-color: $bg-color;
            border-bottom-color: $bg-color;
            background-color: darken($bg-color, 4%);
        }
    }

    .asset-prefix {
        color: $light-text-color !important;
    }

    .transfer-top {
        background-color: $light-panel-bg-color;
        label,
        label > span {
            color: $light-text-color;
        }
    }

    // buttons

    .button {
        background: $button-bg-color;
        &:hover,
        &:focus,
        &:active {
            background-color: lighten($button-bg-color, 4%) !important;
        }
        &.outline {
            color: $secondary-text-color;
            border-color: $secondary-text-color;
            &:hover {
                color: $light-text-color;
                border-color: $light-text-color;
            }
        }
    }

    .button:disabled {
        opacity: 0.2 !important;
        cursor: not-allowed !important;
    }

    .button.secondary {
        @include color($dark-text-color, $secondary-button-bg-color);
        &:hover,
        &:focus,
        &:active {
            @include color(
                lighten($dark-text-color, 4%),
                lighten($secondary-button-bg-color, 4%),
                true
            );
        }
    }

    .button.danger {
        @include color(white, $alert-color);
        &:hover,
        &:focus,
        &:active {
            @include color(white, lighten($alert-color, 4%), true);
        }
    }

    .header .button,
    .header .button:active {
        background-color: transparent !important;
    }

    .header .modal .button {
        background-color: $button-bg-color !important;

        &:hover,
        &:focus,
        &:active {
            background-color: lighten($button-bg-color, 4%) !important;
        }
    }

    .header .modal .button.danger {
        background-color: $alert-color !important;

        &:hover,
        &:focus,
        &:active {
            background-color: lighten($alert-color, 4%) !important;
        }
    }

    .header a.button.create-account {
        transition: color 0s !important;
        color: $button-bg-color !important;
        > span > svg > path {
            fill: $button-bg-color;
        }
        &:hover {
            color: lighten($button-bg-color, 10%) !important;
            > span > svg > path {
                fill: lighten($button-bg-color, 10%);
            }
        }
    }

    .header div.account-drop-down {
        div.total-value {
            color: $account-green;
        }

        div.header-right-lock {
            cursor: pointer;
            padding: 0.9rem 0.25rem;
            &:hover {
                background-color: $bg-color;
            }
        }

        div.dropdown-wrapper {
            > li {
                div.hamburger > .icon > svg rect {
                    fill: $bs-blue;
                }
            }
            &:hover {
                background-color: $bg-color;
            }
        }

        div.dropdown-wrapper.hover-transparent {
            &:hover {
                background-color: transparent;
            }
        }

        div.dropdown-wrapper.cursor-default {
            cursor: default;
        }

        div.dropdown-wrapper.active {
            transition: background-color 0s;
            background-color: $bg-color;
            ul {
                background-color: $bg-color;
            }

            > li {
                div.hamburger > .icon > svg rect {
                    fill: $link-text-color;
                }
            }
        }

        ul.dropdown.header-menu {
            > li {
                > div:first-of-type {
                    > span.icon > svg {
                        > path {
                            fill: $primary-text-color;
                        }
                    }
                }

                &:hover,
                &.active {
                    background-color: $light-panel-bg-color;
                }

                &.divider {
                    border-bottom: 1px solid $account-border;
                }
            }
        }

        ul.dropdown.header-submenu {
            > li {
                &.parent-item {
                    background-color: $main-content-margin-block-bg-color;
                    color: $dark-text-color;
                    &:hover {
                        color: lighten($dark-text-color, 10%);
                        background-color: lighten(
                            $main-content-margin-block-bg-color,
                            10%
                        );
                    }
                }
            }
        }
    }

    @media (max-width: $hamburger-submenu-display-endpoint) {
        ul.dropdown.header-menu {
            li.mobile-only {
                display: block;
            }
            li.desktop-only {
                display: none;
            }
        }
    }

    .header-container span.icon.lock-unlock > svg > path {
        fill: $button-bg-color;
    }

    .grp-menu-item button {
        &:hover,
        &:focus,
        &:active {
            background-color: $light-panel-bg-color !important;
        }
    }

    .grp-menu-item {
        > a,
        .button {
            color: $primary-text-color !important;
        }
    }

    .header .logo {
        color: $secondary-text-color;
    }

    .header-right-menu {
        // a:hover {background-color: lighten($panel-bg-color, 4%);}
        // a.active {background-color: lighten($panel-bg-color, 4%);}
        li.current-account > a {
            color: $info-color;
            &:hover {
                color: $info-color;
            }
            > span {
                @include RobotoMedium;
            }
        }
        svg > path {
            fill: #fff;
        }
        // svg:hover > path { fill: $primary-text-color; }
    }

    .settings-cog {
        svg > path {
            fill: $secondary-text-color;
        }
    }

    // cards

    .card-section {
        color: black;
        padding-left: 0.5rem;
        > ul {
            color: $light-text-color;
            list-style: none;
            font-size: 85%;
            margin-left: 0;
        }
    }

    .card {
        @include color($primary-text-color, $panel-bg-color);
        background-color: $panel-bg-color;
        &:hover {
            background-color: lighten($panel-bg-color, 4%);
            > h4 {
                background-color: lighten($light-panel-bg-color, 4%);
            }
        }
        a {
            color: $primary-text-color;
        }
        .card-divider {
            @include color($primary-text-color, $light-panel-bg-color);
        }
        > h4 {
            background-color: $light-panel-bg-color;
        }
    }

    // tables
    .table {
        > thead > tr > th {
            border-bottom-color: $dark-text-color;
            color: $secondary-text-color;
        }
        > tbody > tr > td {
            border-bottom-color: $dark-text-color;
            font-size: 0.875rem;
        }
        &.table-hover > tbody > tr:hover > td,
        .table-hover > tbody > tr:hover > th {
            background-color: lighten($bg-color, 4%);
        }
        > tbody > tr.table-empty > td {
            padding: 5rem 0;
            font-size: 1.5rem;

            text-align: center;
            color: $account-dimmed !important;
            background-color: $bg-color !important;
        }
    }

    // block-list

    .block-list {
        color: $primary-text-color;
        li {
            border-bottom: 1px solid $border-color;
        }
        li > a {
            color: $secondary-text-color;
        }
        li > a:hover,
        li > label:hover,
        li select:hover,
        li.active > a {
            color: $light-text-color;
            background-color: lighten($bg-color, 4%);
        }
        li:first-child {
            border-top: 1px solid $border-color;
        }
        header {
            margin-left: 0;
            margin-bottom: 1rem;
            color: $secondary-text-color;
        }
        &.no-border-bottom {
            li {
                border-bottom: 0;
            }
        }

        li.with-dropdown {
            .settings-select {
                @extend .settings-select;
            }
            > input.settings-input[type="text"] {
                @extend .settings-input;
            }
        }
    }

    // forms

    .right-label,
    .left-label {
        color: $secondary-text-color;

        > span {
            color: inherit;
        }
    }

    div.input-wrapper {
        > div.input-right-symbol {
            color: $secondary-text-color;
        }
    }

    .dropdown-wrapper {
        > div:first-of-type {
            color: $secondary-text-color;
        }

        ul.dropdown {
            @include color($light-text-color, $super-light-panel-bg-color);
            &::after {
                border-bottom-color: $super-light-panel-bg-color;
            }
            > li > span {
                color: $light-text-color;
            }
            /* Hover state */

            li:hover > span {
                @include color(
                    $light-text-color,
                    lighten($super-light-panel-bg-color, 4%)
                );
                color: $link-text-color;
            }
        }

        &.active:after {
            border-color: $link-text-color transparent;
        }

        &:after {
            /* Little arrow */
            border-color: $secondary-text-color transparent;
        }
    }

    .account-image {
        .icon:hover {
            svg path {
                fill: darken($secondary-text-color, 5%);
            }
        }
    }
    .account-selector,
    .pubkey-input {
        .account-image {
            > canvas {
                color: black;
            }
            .icon > svg path {
                fill: $primary-text-color;
            }
            .icon:hover {
                svg path {
                    fill: darken($secondary-text-color, 5%);
                }
            }
        }
    }
    .has-error,
    div.has-error > label,
    div.has-error > label > span,
    .error-msg {
        color: $error-text-color !important;
    }

    .floatRight {
        float: right;
    }

    .has-warning,
    div.has-warning > label,
    div.has-warning > label > span {
        color: $warning-color;
    }

    div.has-error > input,
    div.has-error > input:hover,
    div.has-error > input:focus {
        border-color: $error-text-color;
    }

    .has-error input,
    .has-error select,
    .has-error textarea {
        border-color: $error-text-color;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    textarea,
    input[role="combobox"],
    select[role="combobox"] {
        background-color: $input-background;
        border: 0;
        color: $primary-text-color;
        &:hover,
        &:focus,
        &:active {
            background-color: $input-background;
        }
        &:focus {
            border-color: #aaa;
        }
    }

    textarea {
        line-height: 22px;
    }

    // Typeahead
    input[role="combobox"] {
        padding: 5px 10px;
        width: 100%;
        box-sizing: border-box;
    }

    .typeahead {
        > div {
            > div {
                z-index: 1003;
                background-color: $input-background !important;
                > div {
                    color: $primary-text-color !important;
                    background-color: transparent !important;
                    &:hover,
                    &:active,
                    &:focus,
                    &:visited {
                        background-color: darken(
                            $input-background,
                            10%
                        ) !important;
                    }
                }
            }
        }
        .typeahead__input {
            background: $input-background;
        }
        .typeahead__innerList {
            background: $panel-bg-color;
        }
        .typeahead__innerItem {
            color: $primary-text-color;

            > .typeahead__innerItem__highlight {
                background-color: darken($input-background, 10%) !important;
            }

            > .typeahead__innerItem__disabled {
                color: $inactive-text-color;
            }
        }
    }
    ul.button-group.segmented {
        > li.is-active > a {
            background: $input-background;
            color: $primary-text-color;
            border-bottom: 1px solid $button-bg-color;
        }
    }
    // Tabs

    .tabs {
        border-bottom-color: $dark-text-color;
        > .tab-item {
            color: $secondary-text-color;
            &.is-active {
                color: $primary-text-color;
                border-bottom-color: $button-bg-color;
            }
            &:hover,
            &:focus,
            &:active {
                color: $primary-text-color;
            }
        }
    }

    .tab-content {
        background-color: lighten($account-header, 4%);
        div.header-selector {
            .filter input {
                background-color: $bg-color;
            }
            .selector {
                .inactive {
                    color: $inactive-text-color;
                }
            }
        }
    }

    // Exchange

    .depthchart {
        background-color: $bg-color;
        &:hover {
            background-color: $bg-color;
        }
        &.area {
            color: #fff;
        }
    }

    .bid-total {
        color: $bid-color !important;
    }

    .ask-total {
        color: $ask-color !important;
    }

    .stats .stat .negative {
        color: $negative-color !important;
    }

    .stats .stat .positive {
        color: $positive-color !important;
    }

    .value.negative {
        color: $ask-color !important;
        @include RobotoMedium;
    }

    .value.positive {
        color: $bid-color !important;
        @include RobotoMedium;
    }

    .active-bucket {
        background-color: lighten($light-panel-bg-color, 12%);
    }

    .bucket-option:hover {
        background-color: $panel-bg-color;
    }

    .buy-sell-box {
        background-color: lighten($light-panel-bg-color, 12%);

        > select {
            background-color: lighten($light-panel-bg-color, 12%);
            background: lighten($light-panel-bg-color, 12%)
                url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20width%3D%2232%22%20height%3D%2224%22%20viewBox%3D%220%200%2032%2024%22%3E%3Cpolygon%20points%3D%220%2C0%2032%2C0%2016%2C24%22%20style%3D%22fill%3A%20black%22%3E%3C/polygon%3E%3C/svg%3E")
                right 10px center no-repeat;
        }
    }

    .buy-sell-input > input.no-balance {
        color: $alert-color;
    }

    // Account page
    .account-left-panel {
        h5 {
            color: $primary-text-color;
        }
        h6 {
            @include RobotoMedium;
        }
        .bottom {
            border-top-color: $bg-color;
        }

        .advanced-toggle > a {
            color: $primary-text-color;
        }

        a.pay-button {
            background-color: $bg-color;
            color: $primary-text-color;

            &:hover {
                background-color: $light-panel-bg-color !important;
            }
        }

        div.create-account-button {
            background: transparent;
            border: 2px solid $button-bg-color;

            > a {
                @include RobotoMedium;
                color: $primary-text-color;
            }
        }
    }

    .account-info {
        color: $primary-text-color;
        > p:first-of-type {
            color: $light-text-color;
        }
        .account-title {
            &.flash {
                color: white;
            }
        }
        > div.secondary {
            > span:first-of-type {
                color: $primary-text-color;
            }

            > span:last-of-type {
                color: $secondary-text-color;
            }
        }
    }

    .my-account h5,
    .my-account h4,
    .my-account p,
    table.table > tbody > tr > td.my-account > span {
        @include RobotoMedium;
        color: $info-color;
    }

    .account-left-menu {
        > li > a:hover,
        > li > label:hover,
        > li select:hover {
            color: $light-text-color;
            background-color: lighten($panel-bg-color, 5%);
        }
        > li > a.active {
            color: $light-text-color;
            background-color: lighten($panel-bg-color, 4%);
            border-right-color: darken($button-bg-color, 4%);
        }
    }

    .pagination {
        background-color: $panel-bg-color;
    }

    .invoice {
        .item-description {
            color: $secondary-text-color;
        }
    }

    // Formatted assets
    .facolor-success {
        color: $success-color;
    }

    .facolor-alert {
        color: $alert-color;
    }

    .facolor-warning {
        color: $warning-color;
    }

    .facolor-info {
        color: $info-color;
    }

    .facolor-error {
        color: $error-text-color;
    }

    .facolor-fee {
        color: $fee-color;
    }

    // AccountSelector component
    .error-area {
        color: $error-text-color;
    }
    .account-selector {
        .right-label {
            color: $secondary-text-color;
        }
    }

    .icon.success {
        padding-right: 1rem;
        > svg > path {
            fill: $success-color;
        }
    }

    .icon.error {
        padding-right: 1rem;
        > svg > path {
            fill: $warning-color;
        }
    }

    .circle-wrapper {
        .circle:before {
            background-color: $secondary-text-color;
        }
    }

    // Misc

    .chart-zoom-dropdown {
        width: 24px;
        height: 28px;
        padding: 4px;
        opacity: 0.5;
        overflow: hidden;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        transition: all 0.5s ease;

        &:hover,
        &:active,
        &:focus {
            background-color: $bg-color;
            padding: 4px;
            opacity: 0.85;
            border-radius: 2px;
            color: $light-text-color;
            font-size: 60%;
            width: 348px;
            height: 48px;
        }
    }

    .remove {
        color: $alert-color;
        border: none;
        padding: 2px 4px;
        font-size: 120%;
        background-color: transparent;
        border-radius: 0;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        transition: all 0.5s ease;
        &:hover,
        &:active,
        &:focus {
            color: $light-text-color;
            background-color: $alert-color;
            font-size: 120%;
            border-radius: 2px;
        }
    }

    .memo {
        color: $secondary-text-color;
    }

    .help-content-layout div {
        background-color: $bg-color !important;
        .help-toc {
            ul {
                margin: 0px;
                li {
                    padding-top: 3px;
                    padding-left: 5px;
                    background: none;
                    color: $secondary-text-color;
                    a {
                        color: $secondary-text-color;
                    }
                    a:hover {
                        color: $light-text-color;
                    }
                    ul {
                        margin-left: 1.1rem;
                    }
                }
                li:hover {
                    background-color: $header-color;
                    a {
                        color: $light-text-color;
                    }
                    a:hover {
                        background-color: $header-color;
                        color: $light-text-color;
                    }
                }
            }
            h4 {
                color: $secondary-text-color;
            }
            a {
                display: block;
            }
        }
    }

    .help-content {
        padding: 10px;

        ul {
            list-style: none;
        }
        li {
            @include image($bg-color);
            background-size: 7px 10px;
            padding-left: 12px;
        }
        a {
            color: $link-text-color;
        }
        a:hover {
            background-color: $link-text-color;
            color: $bg-color;
        }
        hr {
            border: none;
            height: 1px;
            width: 100%;
            background-color: $panel-bg-color;
        }
        code {
            color: $primary-text-color;
            background-color: transparent;
            border-color: $dark-text-color;
        }
        blockquote {
            color: $secondary-text-color;
            border-left: 3px solid $panel-bg-color;
        }
    }

    .click-for-help {
        border-bottom-color: $secondary-text-color !important;
    }

    // Block List (section)
    section.block-list input[type="text"],
    section.block-list input[type="password"] {
        border-bottom: 1px solid $panel-bg-color;
        background-color: transparent;
        color: $primary-text-color;
        &:hover,
        &:active,
        &:focus {
            color: $primary-text-color;
            background-color: transparent;
            border-bottom: 1px solid $panel-bg-color;
        }
    }

    .remove {
        color: $alert-color;
        border: none;
        padding: 2px 4px;
        font-size: 120%;
        background-color: transparent;
        border-radius: 0;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        transition: all 0.5s ease;
        &:hover,
        &:active,
        &:focus {
            color: $light-text-color;
            background-color: $alert-color;
            font-size: 120%;
            border-radius: 2px;
        }
    }

    .menu-group.primary,
    .menu-group.primary .menu-bar {
        background-color: $account-background;

        li {
            > a {
                color: $account-dimmed;
                .icon > svg > path {
                    fill: $account-dimmed;
                }
            }

            > a:hover,
            > a.active {
                background-color: $bg-color !important;
                color: $primary-text-color;

                .icon > svg > path {
                    fill: $primary-text-color;
                }
            }
        }
    }

    // Asset Detail

    .asset-card {
        .card-divider {
            background: $panel-bg-color;
        }
    }

    // Exchange
    .mymarkets-header {
        border-bottom-color: $button-bg-color;
        &.inactive {
            border-bottom-color: transparent;
            color: $secondary-text-color;
        }
    }

    .exchange-content-header {
        color: $light-text-color;
        background-color: $header-color !important;
        border-bottom: 1px solid $button-bg-color;
        &.bid {
            border-bottom: 1px solid $bid-color;
        }

        &.ask {
            border-bottom: 1px solid $ask-color;
        }
    }

    // .block-content-header {
    //   //text-transform: uppercase;
    //   @include RobotoLight;
    // }

    .orderHistoryBid {
        > span.price-integer,
        > span > span.price-integer,
        > span.formatted-price > span {
            @include RobotoMedium;
            color: $bid-color;
        }

        > span.price-decimal,
        > span > span.price-decimal {
            color: $primary-text-color;
            opacity: 0.6;
        }
    }

    .orderHistoryAsk {
        > span.price-integer,
        > span > span.price-integer,
        > span.formatted-price > span {
            @include RobotoMedium;
            color: $ask-color;
        }

        > span.price-decimal,
        > span > span.price-decimal {
            color: $primary-text-color;
            opacity: 0.6;
        }
    }

    .orderHistoryCall {
        > span.price-integer,
        > span > span.price-integer,
        > span.formatted-price > span {
            @include RobotoMedium;
            color: $call-color;
        }

        > span.price-decimal,
        > span > span.price-decimal {
            color: $primary-text-color;
            opacity: 0.6;
        }
    }

    .order-table .my-order {
        > .vertical-order-table-cell,
        > td {
            font-weight: bold;
            color: $info-color;
        }

        span.price-integer,
        span.price-decimal {
            color: $info-color !important;
            opacity: 1;
        }
    }

    .bid {
        background-color: $bid-color !important;
    }

    .ask {
        background-color: $ask-color !important;
    }

    .orderbook-latest-price {
        > div {
            $orderbook-center-horizontal-margin: 5px;
            margin-top: $orderbook-center-horizontal-margin;
            margin-bottom: $orderbook-center-horizontal-margin;
            background-color: $panel-bg-color !important;
            border-bottom: 1px solid grey !important;
            border-top: 1px solid grey !important;
            padding: 10px 0 !important;
            @include RobotoMedium;
            font-size: 13px;
        }
    }

    .sticky-table .sticky-table-column,
    .sticky-table .sticky-table-header,
    .sticky-table .sticky-table-corner {
        @include color($primary-text-color, $bg-color);
    }

    .left-order-book {
        background-color: $bg-color;

        .spread .spread-value {
            color: $primary-text-color;
        }
    }

    .sticky-table-header {
        width: 100%;
        height: 32px;
        border-bottom: 1px solid grey;

        .sticky-table-container {
            height: 100%;
            width: 100%;
        }

        #sticky-header-row {
            background-color: $panel-bg-color;
        }

        .sticky-table-row {
            width: 100%;
            background-color: $bg-color;

            &.order-row:hover {
                background-color: $panel-bg-color;
            }
        }
    }

    .order-table {
        > tbody > tr:nth-of-type(even) {
            background-color: $row-accent-color;
        }
    }

    .mymarkets-header {
        background-color: $header-color;
    }

    tr.activeMarket,
    tr.activeMarket:hover {
        color: #4c85d8;
        background-color: $header-color;
    }

    .market-stats .stat .value {
        color: $primary-text-color;
    }

    li.stat.input {
        &:hover {
            background-color: lighten($panel-bg-color, 4%);
        }
    }
    .stats .stressed-stat {
        padding: 10px 0;
        font-size: 18px;

        &.is-call {
            color: $call-color !important;
        }

        &.daily_change {
            &.positive {
                color: $account-green !important;
            }
            &.negative {
                color: $negative-color !important;
            }
        }
    }

    .stat-text {
        margin-top: 3px;
        font-size: 11px;
        color: gray;
    }

    .buy-sell-box {
        background-color: $header-color;

        > select {
            padding: 0;
            margin: 0;
            height: 1.75rem;
            line-height: 1.75rem;
            border: none;
            color: $primary-text-color;
            background-size: 8px 8px;
            background-color: $header-color;
            font-size: 12px;

            > option {
                color: $primary-text-color;
                background-color: $header-color;
            }
        }
    }

    .change-up {
        color: $bid-color !important;
    }

    .change-down {
        color: $ask-color !important;
    }

    .header-sub-title {
        font-size: 11px;
        color: $light-text-color;
    }

    .label {
        background-color: $panel-bg-color;
    }

    .mymarkets-group-header {
        background-color: $header-color;
        padding: 8px 35px;
        border-bottom: 1px solid grey;
        @include RobotoMedium;
        text-transform: uppercase;
        cursor: pointer;
    }

    div.exchange-content-header {
        background-color: $header-color !important;
    }

    .table > tbody > tr:nth-of-type(even) {
        background-color: lighten($bg-color, 4%);
    }
    //bottom stats
    .bucket-option {
        @include button-focus($secondary-text-color, $panel-bg-color, 0);
        &:hover {
            @include button-focus($primary-text-color, $panel-bg-color, 10);
        }
    }

    .active-bucket {
        @include button-focus($primary-text-color, $panel-bg-color, 10);
    }

    .indicators,
    li.stat.clickable {
        color: $secondary-text-color;
        // &:hover{
        //   @include button-focus($primary-text-color, $panel-bg-color, 10);
        // }
    }

    .mymarkets-tabs {
        > li {
            @include button-focus($secondary-text-color, $panel-bg-color, 0);
            &:hover {
                @include button-focus($primary-text-color, $panel-bg-color, 10);
            }

            &.active {
                @include button-focus($primary-text-color, $panel-bg-color, 10);
            }
        }
    }

    .mymarkets-list {
        border-top: 2px solid $panel-bg-color;
    }

    select.bts-select,
    select.native-coin-types,
    select.external-coin-types {
        color: $secondary-text-color;
        background-color: $light-panel-bg-color;
        border: 0;
        &:hover,
        &:focus,
        &:active {
            background-color: $light-panel-bg-color;
        }
    }

    .api-node {
        &:hover {
            background-color: lighten($bg-color, 4%);
        }
        border: 1px solid $settings-api-node-border-color;
        &:nth-child(n + 1) {
            border-bottom: 0;
        }
        &:last-child {
            border: 1px solid $settings-api-node-border-color;
        }
    }

    // Settings
    .settings-menu {
        > ul {
            width: 200px;
            transition: 0.3s;
            margin-left: 0;
            > li {
                border-radius: 2px;
                color: $secondary-text-color;
                padding: 3px 11px;
                margin: 5px;
                &:hover {
                    color: $primary-text-color;
                    background-color: $settings-menu-hover-bg;
                }

                &.active {
                    color: $primary-text-color;
                    background-color: $settings-menu-active-bg;
                }
            }
        }
    }

    .settings--notifications {
        .settings--notifications--group {
            .settings--notifications--item {
                label {
                    color: $settings-select-color;
                }
            }
        }
        .settings--notifications--no-browser-support {
            color: $error-text-color;
            font-size: 12px;
        }
    }

    @media (max-width: $hamburger-submenu-display-endpoint) {
        .settings-menu {
            display: none;
        }
    }

    a {
        &.order-cancel > .icon > svg {
            > path {
                fill: $negative-color;
            }
        }

        &.action-plus > .icon > svg {
            > path {
                fill: $positive-color;
            }
        }
    }

    tr.margin-row {
        > td.danger {
            background-color: darken($alert-color, 15%) !important;
            color: $dark-text-color;
            @include RobotoMedium;
        }

        > td.warning {
            background-color: darken($warning-color, 15%) !important;
            color: $dark-text-color;
            @include RobotoMedium;
        }
    }

    .nodes-header {
        border-bottom-color: $button-bg-color;
        background-color: $bg-color;
        &.inactive {
            border-bottom-color: transparent;
            color: $secondary-text-color;
        }
    }

    .react-stockcharts-tooltip {
        fill: $primary-text-color;
    }
    .react-stockcharts-tooltip-label {
        fill: $link-text-color;
    }

    div.custom-dropdown-content {
        background: $panel-bg-color;
        color: $primary-text-color;
        > ul > li {
            &.clickable:hover {
                background-color: lighten($panel-bg-color, 5%);
            }
            > div.clickable:hover {
                background-color: lighten($panel-bg-color, 5%);
            }
        }
    }

    .blocktrades-bridge input,
    .blocktrades-bridge select {
        color: $secondary-text-color;

        border: 1px solid $secondary-text-color;
        background-color: $panel-bg-color !important;
        &.native-coin-types,
        &.external-coin-types {
            background-color: transparent !important;
        }
        > option {
            color: $primary-text-color;
            background-color: $panel-bg-color !important;
        }
        &:hover,
        &:focus {
            color: $primary-text-color;
            //box-shadow: 1px 2px 3px #000;
            border: 2px solid $primary-text-color;
        }
    }

    .SimpleTrade__modal {
        .Modal__header {
            background-color: lighten($panel-bg-color, 5%);
        }
        .Modal__divider {
            border-bottom: 2px solid #020202;
        }
    }

    ul.dashboard-links {
        > li.active {
            color: $primary-text-color;
        }
    }

    .switch input:checked + label {
        background-color: darken($positive-color, 10%);
        &::after {
            border: none;
            background-color: lighten($positive-color, 5%);
        }
    }

    div.ok-indicator {
        color: $secondary-text-color;
        &.success {
            color: $success-color;
        }
    }

    .login-selector {
        > div.box {
            background-color: $panel-bg-color;
            &:hover {
                background-color: darken($panel-bg-color, 2%);
            }
            a {
                color: $primary-text-color;
            }
        }
    }

    table.table > tbody > tr.in-use {
        > td:nth-child(2) {
            @include RobotoMedium;
        }
    }

    .SimpleDepositBridge__info-row {
        > div {
            > div.float-right {
                &.above-limit {
                    color: $error-text-color;
                }
            }
        }
    }

    input.my-key,
    td.my-key a {
        @include RobotoMedium;
        color: $info-color;
    }

    td.pub-key {
        word-break: break-all;
    }

    /* Table view account */
    div.grid-content.app-tables {
        background-color: $account-background;
    }
    div.tabs-container {
        background-color: $account-background;
    }

    div.account-tabs {
        > div.service-selector {
            background-color: $bg-color;
        }
    }

    ul.account-overview {
        li {
            transition: all 0.3s ease 0s;

            > a {
                color: $account-dimmed;
                background-color: transparent;
                border: none;

                transition: all 0.3s ease 0s;

                &:hover {
                    background-color: lighten($account-header, 4%);
                    color: $account-primarytext;
                }
                > div.tab-subtext {
                    color: $account-green;
                }
            }
            &.is-active,
            &:hover {
                background-color: lighten($account-header, 4%);
                > a {
                    color: $account-primarytext;
                }
            }
            &.total-value {
                > a {
                    background-color: $account-cells;
                    &:hover > span.tab-title {
                        color: $account-dimmed;
                    }
                }
                .icon.locked > svg > path {
                    fill: $button-bg-color;
                }
            }
        }
    }

    table.table.dashboard-table {
        > thead > tr > th {
            background-color: $account-header;
            color: $account-primarytext;
            border-color: $account-border;
        }
        > tbody > tr.dashboard-table--hiddenAccounts {
            > td {
                height: 20px;
                text-align: left;
                padding-left: 45px;
                background-color: $account-header;
                color: $account-primarytext;
            }
        }
        > tbody > tr {
            > td {
                background-color: $account-cells;
                color: $account-primarytext;
                border-color: $account-border;
                .icon > svg > path {
                    fill: $account-primarytext;
                }

                .icon.locked > svg > path {
                    fill: $button-bg-color;
                }
            }
            &.total-value {
                td {
                    background-color: $account-header;
                }
                td:nth-child(n + 2) {
                    color: $account-green;
                    text-align: right;
                }
            }

            &.unsupported {
                > td {
                    color: grey;
                    > a {
                        color: grey;
                    }

                    svg > path {
                        fill: grey;
                    }
                }
            }
        }
    }

    div.account-creation {
        border: 1px solid $account-cells;
        border-radius: 6px;

        div.button > a {
            color: $primary-text-color;
        }
    }
    span.danger {
        color: darken($alert-color, 15%);
    }
    span.warning {
        color: darken($warning-color, 15%);
    }

    .api-status {
        .low {
            color: $bid-color;
        }
        .medium {
            color: $call-color;
        }
        .high {
            color: $ask-color;
        }
    }

    .footer {
        div.footer-status {
            > span.success {
                color: $success-color;
            }
            > span.warning {
                color: $alert-color;
            }
        }
    }

    tr > td > a.primary-text {
        color: $primary-text-color;
    }

    .pulsate {
        animation: 0.5s ease-out 1;

        &.red {
            animation-name: pulsate-red;
        }

        &.green {
            animation-name: pulsate-green;
        }

        &.reverse {
            animation-timing-function: ease-in;
            animation-direction: reverse;
        }
    }

    @keyframes pulsate-green {
        0% {
            color: $pulsate-green-start;
        }
        100% {
            color: $pulsate-green-end;
        }
    }
    @keyframes pulsate-red {
        0% {
            color: $pulsate-red-start;
        }
        100% {
            color: $pulsate-red-end;
        }
    }

    .introjs-launcher {
        margin-left: 15px;
        background-color: $bs-blue;
        padding: 0 10px;
        font-size: 18px;
        line-height: 1.8;
        transition: background-color 0.2s ease;
        color: #fff;

        &:hover {
            cursor: pointer;
            background-color: darken($bs-blue, 10%);
        }

        @include breakpoint(small only) {
            position: absolute;
            bottom: 1rem;
            right: 0.3rem;
            z-index: 9999;
            display: block;
            line-height: 0;
            font-size: 0;
            color: transparent;
            background-color: transparent;

            &:after {
                content: "?";
                color: #fff;
                font-size: 1rem;
                line-height: 1.5;
                text-align: center;
                padding: 0.3rem 0.8rem;
                background-color: $bs-blue;
                border: 1px solid $bg-color;
            }
        }
    }

    .footer {
        padding-right: 0;
    }

    .header-container {
        background-color: $account-background;

        .menu-dropdown-wrapper {
            &.active {
                background: $panel-bg-color;
            }
        }

        .dropdown.header-menu {
            background-color: $panel-bg-color;

            li.divider {
                border-bottom: 1px solid $dark-text-color;
            }

            > li:hover {
                background-color: $super-light-panel-bg-color;
            }
        }

        .total-value {
            color: $account-green;
        }
    }

    .flip-arrow:hover {
        color: $bs-blue;
        cursor: pointer;
    }

    .order-2 .flip-arrow,
    .order-5 .flip-arrow {
        display: none;
    }

    .order-book-button-h svg > path {
        fill: #fff;

        &:hover {
            fill: $bs-blue;
            cursor: pointer;
        }
    }

    .order-book-button-v {
        display: none;
    }

    @include breakpoint(large) {
        .order-book-button-v {
            display: inline-block;
            margin-left: 5px;

            svg > path {
                fill: #fff;

                &:hover {
                    fill: $bs-blue;
                    cursor: pointer;
                }
            }
        }
    }

    .calendarContainer {
        // restyle of react-datepicker2
        box-shadow: none;
        background-color: $panel-bg-color;
        border: 0;
        color: $light-text-color;

        button svg {
            fill: $light-text-color;
        }

        .dayWrapper button:hover {
            color: $light-text-color;
            background-color: $button-bg-color;
        }

        .dayWrapper button[disabled] {
            background-color: darken($panel-bg-color, 5%);
            color: darken(#aaa, 20%);
        }

        .monthsList {
            button {
                border: 0;
                background-color: $panel-bg-color;
                &:hover {
                    background-color: $input-background;
                }
            }
        }

        .time-table {
            line-height: 38px;
        }

        input.rc-time-picker-input {
            background: $input-background;
            color: $light-text-color;
            &:hover {
                border-color: $input-background;
                background-color: $input-background;
                color: $light-text-color;
            }
            cursor: pointer;
        }

        .heading {
            .title {
                line-height: 28px;
                border-color: $panel-bg-color;
            }
            > button {
                line-height: 30px;
                border-color: $panel-bg-color;
                &:hover {
                    border-color: $panel-bg-color;
                    background-color: $input-background;
                }
                &.prev,
                &.next {
                    line-height: 28px;
                }
                &.prev {
                    float: left;
                    transform: rotate(-180deg);
                }
                &.next {
                    float: right;
                    transform: rotate(-180deg);
                }
            }
        }
    }

    .expiration-datetime-picker {
        width: 225px;
        > div {
            float: right;
        }
        input {
            width: 160px;
            padding: 0;
            margin: 0 5px 0 0;
            background: transparent;
            border-radius: 0 !important;
            border-bottom: 1px dotted rgb(160, 159, 159);
            display: inline-block;
            text-align: right;
            font-size: 0.9rem;
            height: 28px;
            &:hover {
                background: transparent;
            }
        }
        select {
            float: right;
            width: auto;
            padding: 0;
            background: transparent;
            border: 0;
            color: $primary-text-color;
            border-bottom: 1px dotted rgb(160, 159, 159);
            font-size: 0.9rem;
            height: 28px;
            margin: 0 0 1px;

            > option {
                background-color: $light-panel-bg-color;
            }
        }
    }
}

.rc-time-picker-panel {
    z-index: 9999 !important;
}

.midnightTheme .gate_fee .amount-selector {
    width: 100%;
    display: inline-block;
}

.midnightTheme .gate_fee .right-selector {
    text-align: right;
    width: 26%;
    display: inline-block;
    color: #adadad;
    text-transform: uppercase;
}

.midnightTheme .gate_fee .right-selector .right-selector-input {
    text-align: right;
    width: 100%;
}

.clear-text,
.search-wrapper {
    position: relative;
}

.market-filter-input,
.clear-text,
.search-wrapper {
    position: relative;
}

.clear-text {
    top: 10px;
    right: -30px;
    position: absolute;
    border: 0;
    background-color: transparent;
    display: block;
    outline: 0;
    cursor: pointer;
}
.clear-text:after {
    content: "X";
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
    background-color: transparent;
    z-index: 1;
    right: 35px;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 2px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    font-weight: normal;
    font-size: 12px;
    cursor: pointer;
}
.market-filter-input:not(:valid) ~ .clear-text {
    display: none;
}

.header-container {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    height: 64px;

    .menu-bar {
        overflow: visible;
    }

    .logo {
        padding-top: 0.7rem;
        padding-bottom: 0.8rem;
    }

    .dropdown-wrapper:after {
        display: none;
    }

    .menu-dropdown-wrapper {
        height: 65px;
        width: 65px;
        text-align: center;
        border-radius: 0;

        .hamburger .icon {
            position: relative;
            top: 12px;
        }
    }

    .dropdown.header-menu {
        top: 65px;
    }

    .hamburger svg rect,
    .hamburger-x svg rect {
        fill: $bs-blue;
    }

    .total-value {
        text-align: right;
        font-size: 80%;
        line-height: normal;
    }
}

.local-wallet-menu {
    // top: 50px!important;
    .table-cell {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &:nth-of-type(2) {
            max-width: 17em;
        }
    }
}

.app-menu {
    flex: 0;
}

.truncated {
    flex: 1;
    min-width: 0; /* or some value */
    .text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: right;
    }
}

@media screen and (max-width: 640px) {
    .responsive-list > .help-content > ul {
        height: 300px;
        overflow-y: scroll;
        border-radius: 6px;
        background: #2a2a2a;
        border: 1px solid #4b5158;
        margin-bottom: 2rem !important;

        li {
            border-bottom: 1px solid #393939;
            padding: 4px;

            ul li {
                border: 0;
            }
        }
    }
}
